<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员面板</title>
    <script src="{{url_for('static', filename='js/jquery-3.6.0.min.js')}}"></script>
    <script src="{{url_for('static', filename='js/custom_message_box.js')}}"></script>
    <link rel="stylesheet" href="{{url_for('static', filename='css/custom_message_box.css')}}">
    <style>
        body {
            position: relative;
            font-family: Arial, sans-serif;
            margin: 20px;
            padding: 0;
            background: url("{{url_for('static', filename='img/admin.jpg')}}") no-repeat center;
            background-size: cover;
        }

        button {
            padding: 10px 20px;
            margin: 5px;
            font-size: 14px;
            cursor: pointer;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
        }

        button:hover {
            background-color: #0056b3;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        table,
        th,
        td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }

        input[type="text"],
        input[type="password"] {
            padding: 6px;
            width: 100%;
            box-sizing: border-box;
            margin-bottom: 6px;
        }

        #login_box {
            background-color: rgba(226, 234, 244, 0.5);
            height: 300px;
            width: 1200px;
            margin: 250px 150px;
            border-radius: 20px;
            padding: 50px;
        }

        div #doctorTable {
            position: absolute;
            top: 10px;
            left: 0px;
            margin-left: 500px;
        }

        #adminTable {
            position: absolute;
            top: 200px;
            left: 500px;
        }
    </style>
    <script>
        function logoutAdmin() {
            window.location.href = "{{ url_for('admin.logout_admin_web') }}";
        }

        function deleteDoctor(doctorId) {
            fetch("{{ url_for('doctor.delete_doctor') }}", {
                method: 'POST', // or 'DELETE', depending on your backend API design  
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ "id": doctorId })
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Failed to delete doctor');
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.code === 0) {
                        showMessage('success', "Successfully deleted doctor", 'message', 3000);
                        queryDoctor(); // refresh the page  
                    } else {
                        showMessage('error', "Failed to delete doctor: " + data.message, 'message', 3000);
                    }
                })
                .catch(error => {
                    showMessage('error', "Error deleting doctor:" + error, 'message', 3000);
                });
        }

        function queryDoctor() {
            fetch("{{ url_for('doctor.query_doctor') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({})
            })
                .then(response => response.json())
                .then(data => {
                    if (data.code === 0) {
                        const doctors = data.data;
                        const table = document.createElement("table");
                        table.innerHTML = `<tr>
                                <th>医生编号</th>
                                <th>用户名</th>
                                <th>密码</th>
                                <th>姓名</th>
                                <th>操作</th>
                            </tr>`;
                        doctors.forEach(doctor => {
                            const row = table.insertRow(-1);
                            row.innerHTML = `<td>${doctor.id}</td>
                                    <td>${doctor.username}</td>
                                    <td>******</td>
                                    <td>${doctor.name}</td>
                                    <td><button onclick="deleteDoctor(${doctor.id})">删除</button></td>`;
                        });
                        const row = table.insertRow(-1);
                        row.innerHTML = `<td>未插入</td>
                                <td><input type="text" id="new_doctor_username" name="username" required></td>
                                <td><input type="password" id="new_doctor_password" name="password" required></td>
                                <td><input type="text" id="new_doctor_name" name="name" required></td>
                                <td><button onclick="addDoctor()">插入</button></td>`;
                        const doctorTable = document.getElementById("doctorTable");
                        doctorTable.innerHTML = ''; // Clear previous content
                        doctorTable.appendChild(table);
                    } else {
                        showMessage('error', "Failed to query doctors: " + data.message, 'message', 3000);
                    }
                })
                .catch(error => {
                    showMessage('error', "Error querying doctors:" + error, 'message', 3000);
                });
        }

        function addDoctor() {
            const username = document.getElementById("new_doctor_username").value;
            const password = document.getElementById("new_doctor_password").value;
            const name = document.getElementById("new_doctor_name").value;
            fetch("{{ url_for('doctor.add_doctor') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ "username": username, "password": password, "name": name })
            })
                .then(response => response.json())
                .then(data => {
                    if (data.code === 0) {
                        showMessage('success', "Successfully added doctor", 'message', 3000);
                        queryDoctor();
                    } else {
                        showMessage('error', "Failed to add doctor: " + data.message, 'message', 3000);
                    }
                })
                .catch(error => {
                    showMessage('error', "Error adding doctor:" + error, 'message', 3000);
                });
        }

        function deleteAdmin(adminId) {
            fetch("{{ url_for('admin.delete_admin') }}", {
                method: 'POST', // or 'DELETE', depending on your backend API design  
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ "id": adminId })
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Failed to delete admin');
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.code === 0) {
                        showMessage('success', "Successfully deleted admin", 'message', 3000);
                        queryAdmin(); // refresh the page  
                    } else {
                        showMessage('error', "Failed to delete admin: " + data.message, 'message', 3000);
                    }
                })
                .catch(error => {
                    showMessage('error', "Error deleting admin:" + error, 'message', 3000);
                });
        }

        function queryAdmin() {
            fetch("{{ url_for('admin.query_admin') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({})
            })
                .then(response => response.json())
                .then(data => {
                    if (data.code === 0) {
                        const admins = data.data;
                        const table = document.createElement("table");
                        table.innerHTML = `<tr>
                                <th>管理员编号</th>
                                <th>用户名</th>
                                <th>密码</th>
                                <th>操作</th>
                            </tr>`;
                        admins.forEach(admin => {
                            const row = table.insertRow(-1);
                            row.innerHTML = `<td>${admin.id}</td>
                                    <td>${admin.username}</td>
                                    <td>******</td>
                                    <td><button onclick="deleteAdmin(${admin.id})">删除</button></td>`;
                        });
                        const row = table.insertRow(-1);
                        row.innerHTML = `<td>未插入</td>
                                <td>username:<input type="text" id="new_admin_username" name="username" required></td>
                                <td>password:<input type="password" id="new_admin_password" name="password" required></td>
                                <td><button onclick="addAdmin()">插入</button></td>`;
                        const adminTable = document.getElementById("adminTable");
                        adminTable.innerHTML = ''; // Clear previous content
                        adminTable.appendChild(table);
                    } else {
                        showMessage('error', "Failed to query admins: " + data.message, 'message', 3000);
                    }
                })
                .catch(error => {
                    showMessage('error', "Error querying admins:" + error, 'message', 3000);
                });
        }

        function addAdmin() {
            const username = document.getElementById("new_admin_username").value;
            const password = document.getElementById("new_admin_password").value;
            fetch("{{ url_for('admin.add_admin') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ "username": username, "password": password })
            })
                .then(response => response.json())
                .then(data => {
                    if (data.code === 0) {
                        showMessage('success', "Successfully added admin", 'message', 3000);
                        queryAdmin();
                    } else {
                        showMessage('error', "Failed to add admin: " + data.message, 'message', 3000);
                    }
                })
                .catch(error => {
                    showMessage('error', "Error adding admin:" + error, 'message', 3000);
                });
        }
    </script>
</head>

<body>
    <div id="message" class="message-box"></div>
    <div id="login_box">
        <h3>功能列表</h3>
        <div style="margin: 25px 25px">
            <button onclick="logoutAdmin()">退出登录</button>
        </div>
        <div style="margin: 25px 25px">
            <button onclick="queryDoctor()">医生管理</button>
        </div>
        <div style="margin-left: 25px">
            <button onclick="queryAdmin()">管理员管理</button>
        </div>
        <div id="doctorTable"></div>
        <div id="adminTable_father">
            <div id="adminTable"></div>
        </div>

    </div>

</body>

</html>